<template>
  <transition name="slide">
    <div v-if="props.visible" class="content">
      <slot></slot>
    </div>
  </transition>
</template>

<script setup>
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
</script>

<style scoped>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s ease;
}
.slide-enter,
.slide-leave-to {
  transform: translateY(100vh);
}
.content {
  /* transform: translateY(100vh); */
  width: 100%;
  height: 100%;
}
</style>
